<script setup lang="ts">
import { reactive, ref, defineProps } from 'vue';
import { Fold, Expand } from '@element-plus/icons-vue';
import { getUserInfo } from '@/api/index'
/**
 * 接收父组件传递过来的参数
*/

const { toggleIcon, isFolded } = defineProps(['toggleIcon', 'isFolded']);
const userName = ref('admin');
/**
 * 个人中心
 * */
const handleClick = () => {
    console.log('个人中心');
}
/**
 * 退出登录
 * */
const handleLogout = () => {
    console.log('退出登录');
}
getUserInfo().then((res: any) => {
    console.log(res);
    if (res.code == 0) {
        userName.value = res.data.username;
    }
}).catch((error:any) => {
    console.error('获取用户信息失败:', error);
});
</script>

<template>
    <el-header style="background: #20222A;">
        <div class="el-con">
            <el-icon @click="toggleIcon" color="#fff">
                <transition name="fade" mode="out-in">
                    <component :is="isFolded ? Expand : Fold" />
                </transition>
            </el-icon>
            <!-- 头像 -->
            <div class="el-avatar-header">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>{{userName}}</el-dropdown-item>
                            <el-dropdown-item @click="handleClick">个人中心</el-dropdown-item>
                            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </el-header>
</template>


<style scoped lang="less">
.el-con {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-avatar-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        cursor: pointer;
    }
}

.icon-container {
    cursor: pointer;
    /* 鼠标悬停时显示手型 */
}

/* 定义过渡动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: scale(0.9);
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
    transform: scale(1);
}
</style>
